<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="page-header-content">
        <div class="avatar">
          <a-avatar size="large" :src="headImg" />
        </div>
        <div class="content">
          <div class="content-title">
            {{userInfo.name}}<span class="welcome-text">{{userInfo.welcome}}</span>
            <!-- {{ welcome }} -->
          </div>
          <div> {{userInfo.account}} | {{userInfo.phone}} | {{userInfo.lastLoginIp}}</div>
        </div>
      </div>
    </template>
    <template v-slot:extraContent> 
      <div class="extra-content">
        <div class="stat-item">
          <a-statistic title="余额" :value="userInfo.balance" />
        </div>
        <div class="stat-item">
          <!-- <a-statistic title="" :value=" '*' "> -->
            <div class="stat-title">条数余额</div>
            <div class="stat-body">
              <a-button type="link" @click="handleLookUp"> 查看</a-button>
            </div>
            
            <!-- <template #prefix>
              
            </template>
          </a-statistic> -->
        </div>
        <!-- <div class="stat-item">
          <a-statistic title="项目访问" :value="2223" />
        </div> -->
      </div>
    </template>
    <div>
      <a-card :bordered="false">
        <a-row :gutter="24">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <div class="awm-card-wrap">
              <div class="awm-card">
                <chart-card
                  title="发送总量"
                  :total="( analysis.failure || 0 ) + ( analysis.success || 0 ) + ( analysis.unknown || 0 )"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#38a1f2;color:#fff;"
                >
                  <a-tag slot="action">实时</a-tag>
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送成功"
                  :total="analysis.success || 0"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#1bc98e;color:#fff;"
                >
                  <a-tag slot="action">实时</a-tag>
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送失败"
                  :total="analysis.failure || 0"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#e64758;color:#fff;"
                >
                  <a-tag slot="action">实时</a-tag>
                </chart-card>
              </div>
              <div class="awm-card">
                <chart-card
                  title="发送未知"
                  :total="analysis.unknown || 0"
                  :hasContent="false"
                  :loading="platformLoading"
                  style="background-color:#c0c4cc;color:#fff;"
                >
                  <a-tag slot="action">实时</a-tag>
                </chart-card>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
      <a-card :bordered="false" style="margin-top:24px" title="七日发送趋势图">
        <a-row :gutter="24">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <div class="awm-card-wrap">
              <div style="height:500px;width:100%;">
                <AWM-line :chartData="taskLineData" :lineList="taskLineParameter" name=""></AWM-line>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <home-list
      :visible="list.visible"
      @cancel="handleCancel"
    ></home-list>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { ChartCard } from '@/components'
import { baseMixin } from '@/store/app-mixin'
import { getMsgStatistics } from '@/api/index'
import { mapGetters } from 'vuex'
import AWMLine from '@/components/AWMechart/line'
import HomeList from './List.vue'

export default {
  name: 'platform-Analysis',
  mixins: [baseMixin],
  components: {
    ChartCard,
    AWMLine,
    HomeList
  },
  data() {
    return {
      platformLoading: true,
      loading: true,
      //
      analysis:{},
      list:{
        visible: false
      },
      taskLineData: [
      ],
      taskLineParameter: [
        { key: 'success', name: '成功', color: '#1bc98e' },
        { key: 'failure', name: '失败', color: '#e64758' },
        { key: 'unknown', name: '未知', color: '#c0c4cc' },
      ],
    }
  },
  filters: {
  },
  computed: {
    ...mapGetters({ userInfo: 'userInfo', headImg: 'headImg' }),
  },
  created() {},
  mounted() {
    this.getAnalysis()
  },
  methods: {
    handleLookUp(){
      console.log(1111);
      this.list.visible = true
    },
    handleCancel(){
      this.list.visible = false
    },
    getAnalysis() {
      let { startTime, endTime } = this
      let data = { startTime, endTime }
      this.platformLoading = true
      getMsgStatistics(data)
        .then((res) => {
          let data = res.data

          this.analysis = data
          if(data.sevenInfo.length){
            this.taskLineData = data.sevenInfo.reverse().map(v=>{
              return {
                name: v.day.substr(0,10),
                success: v.success || 0,
                failure: v.failure || 0,
                unknown: v.unknown || 0,
              }
            })
          }
        })
        .finally(() => {
          this.platformLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
@import './Workplace.less';
.extra-wrapper {
  display: flex;
  line-height: 32px !important;
  // padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
    position: relative;
  }
}

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.awm-card-wrap {
  display: flex;
  .awm-card {
    width: calc(25% - 12px);
    margin-right: 15px;
    margin-bottom: 24px;
    &.success{
      background-color: #0f0;
    }
    &:last-child {
      margin-right: 0;
    }
    /deep/.chart-card-footer{
      border-top:none;margin-top: 18px;
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .awm-card-wrap {
    flex-wrap: wrap;
    .awm-card {
      width: calc(33% - 12px);
      margin-right: 18px;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:last-child {
        margin-right: auto;
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .awm-card-wrap {
    flex-wrap: wrap;
    .awm-card {
      width: calc(100%);
      margin-right: 0;
    }
  }
}
.ant-table-wrapper-card {
  height: 100%;
}
.ant-table-wrapper {
  padding: 10px;
  // min-height: 428px;
}
.extra-content{

}
.stat-item{
  float: left;
  .stat-title{
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
  .stat-body{
    // margin-bottom: 4px;
    height: 36px;
  }
}
</style>
